---
title: Veröffentliche deine Astro-Website auf Deno 
description: Wie du deine Astro-Webseite mit Deno im Internet veröffentlichst.
sidebar:
  label: Deno Deploy
type: deploy
logo: deno
supports: ['ssr', 'static']
i18nReady: true
---

import { Steps } from '@astrojs/starlight/components';
import StaticSsrTabs from '~/components/tabs/StaticSsrTabs.astro';

Du kannst eine serverseitig gerenderte Astro-Seite auf [Deno Deploy](https://deno.com/deploy) veröffentlichen, einem verteilten System, das JavaScript, TypeScript und WebAssembly weltweit ausführt.

Dieser Leitfaden enthält Anweisungen für die Bereitstellung in Deno Deploy über GitHub Actions oder die CLI von Deno Deploy.

## Anforderungen

In dieser Anleitung wird davon ausgegangen, dass du [Deno](https://deno.com/) bereits installiert hast.

## Projektkonfiguration

Dein Astro-Projekt kann auf [Deno Deploy](https://deno.com/deploy) als statische Website oder als serverseitig gerenderte Website (SSR) bereitgestellt werden.

### Statische Website

Dein Astro-Projekt ist standardmäßig eine statische Website. Du brauchst keine zusätzliche Konfiguration, um eine statische Astro-Site an Deno Deploy zu übergeben.

### Adapter für SSR

So aktivierst du SSR in deinem Astro-Projekt und stellst es mit Deno Deploy bereit:

Füge [den Deno-Adapter][Deno adapter] hinzu, um SSR in deinem Astro-Projekt mit dem folgenden Befehl `astro add` zu aktivieren. Damit installierst du den Adapter und nimmst in einem Schritt die entsprechenden Änderungen an deiner Datei `astro.config.mjs` vor.

```bash
npx astro add deno
```

Wenn du den Adapter stattdessen lieber manuell installieren möchtest, führe die folgenden zwei Schritte aus:

<Steps>
1. Installiere [den `@deno/astro-adapter`-Adapter][Deno adapter] mit deinem bevorzugten Paketmanager als Abhängigkeit deines Projekts. Wenn du npm verwendest oder dir nicht sicher bist, führe dies im Terminal aus:

    ```bash
      npm install @deno/astro-adapter
    ```

2. Aktualisiere deine Projektkonfigurationsdatei `astro.config.mjs` mit den folgenden Änderungen.

    ```js ins={3,6-7}
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import deno from '@deno/astro-adapter';

    export default defineConfig({
      output: 'server',
      adapter: deno(),
    });
    ```

    Als Nächstes aktualisierst du dein `Preview`-Skript in der Datei `package.json` mit der folgenden Änderung.

    ```json del={8} ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "astro preview"
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
      }
    }
    ```
    
    Du kannst jetzt diesen Befehl verwenden, um deine Astro-Produktionsseite lokal mit Deno zu überprüfen.
    
    ```bash
    npm run preview
    ```
</Steps>

## Wie man veröffentlicht

Du kannst Deno Deploy über GitHub Actions oder über das Deno Deploy CLI (Command Line Interface) bereitstellen.

### GitHub Actions Veröffentlichung

Wenn dein Projekt auf GitHub gespeichert ist, führt dich die [Deno Deploy-Webseite](https://dash.deno.com/) durch die Einrichtung von GitHub-Aktionen für die Bereitstellung deiner Astro-Seite.

<Steps>
1. Veröffentliche deinen Code in einem öffentlichen oder privaten GitHub-Repository.

2. Melde dich auf [Deno Deploy](https://dash.deno.com/) mit deinem GitHub-Konto an und klicke auf [Neues Projekt](https://dash.deno.com).

3. Wähle dein Repository und den Branch aus, den du bereitstellen möchtest, und wähle den Modus **GitHub Action**. (Deine Astro-Seite benötigt einen Build-Schritt und kann den automatischen Modus nicht verwenden.)
   
4. Erstelle in deinem Astro-Projekt eine neue Datei unter `.github/workflows/deploy.yml` und füge die unten stehende YAML ein. Diese Datei ähnelt der YAML-Datei von Deno Deploy, mit den zusätzlichen Schritten, die du für deine Astro-Seite benötigst.

    <StaticSsrTabs>
      <Fragment slot="static">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Deploy
        on: [push]

        jobs:
          deploy:
            name: Deploy
            runs-on: ubuntu-latest
            permissions:
              id-token: write # Benötigt für die Autorisierung mit Deno Deploy
              contents: read # Benötigt, um das Repository zu klonen

            steps:
              - name: Clone repository
                uses: actions/checkout@v4

              # Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i`
              - name: Install dependencies
                run: npm ci

              # Du benutzt kein npm? Ändere `npm run build` in `yarn build` oder `pnpm run build`
              - name: Build Astro
                run: npm run build

              - name: Upload to Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO: durch Deno Deploy Projektnamen ersetzen
                  entrypoint: jsr:@std/http/file-server
                  root: dist
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```yaml
        ---
        // .github/workflows/deploy.yml
        ---
        name: Deploy
        on: [push]

        jobs:
          deploy:
            name: Deploy
            runs-on: ubuntu-latest
            permissions:
              id-token: write # Benötigt für die Autorisierung mit Deno Deploy
              contents: read # Benötigt, um das Repository zu klonen

            steps:
              - name: Clone repository
                uses: actions/checkout@v4

              # Du benutzt kein npm? Ändere `npm ci` in `yarn install` oder `pnpm i`
              - name: Install dependencies
                run: npm ci

              # Du benutzt kein npm? Ändere `npm run build` in `yarn build` oder `pnpm run build`
              - name: Build Astro
                run: npm run build

              - name: Upload to Deno Deploy
                uses: denoland/deployctl@v1
                with:
                  project: my-deno-project # TODO: durch Deno Deploy Projektnamen ersetzen
                  entrypoint: server/entry.mjs
                  root: dist
        ```
      </Fragment>
    </StaticSsrTabs>

5. Nachdem du diese YAML-Datei übertragen und auf GitHub in deinem konfigurierten Veröffentlichungs-Branch gepusht hast, sollte die Veröffentlichung automatisch beginnen!

   Du kannst den Fortschritt auf der Registerkarte "Aktionen" auf deiner GitHub-Repository-Seite oder auf [Deno Deploy](https://dash.deno.com) verfolgen.
</Steps>

### CLI-Veröffentlichung

<Steps>
1. Installiere das [Deno Deploy CLI](https://docs.deno.com/deploy/manual/deployctl).

    ```bash
    deno install -gArf jsr:@deno/deployctl
    ```

2. Führe deinen Astro-Bauschritt aus.

    ```bash
    npm run build
    ```

3. Führe `deployctl` zum Veröffentlichen aus!

   Ersetze im folgenden Befehl `<ACCESS-TOKEN>` mit deinem [Personal Access Token](https://dash.deno.com/account#access-tokens) und `<MY-DENO-PROJECT>` mit deinem Deno Deploy-Projektnamen.

    <StaticSsrTabs>
      <Fragment slot="static">
        ```bash
        cd dist && DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server
        ```
      </Fragment>
      
      <Fragment slot="ssr">
        ```bash
        DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs
        ```
      </Fragment>
    </StaticSsrTabs>
    
    Du kannst alle deine Veröffentlichungen auf [Deno Deploy](https://dash.deno.com) verfolgen.

4. (Optional) Um den Build und die Veröffentlichung in einem Befehl zu vereinfachen, füge ein `deploy-deno` Skript in die `package.json` ein.

    <StaticSsrTabs>
      <Fragment slot="static">
        ```json ins={9}
        // package.json
        {
          // ...
          "scripts": {
          "dev": "astro dev",
          "start": "astro dev",
          "build": "astro build",
          "preview": "astro preview",
          "deno-deploy": "npm run build && cd dist && deployctl deploy --project=<MY-DENO-PROJECT> jsr:@std/http/file-server"
          }
        }
        ```
      </Fragment>
      <Fragment slot="ssr">
    ```json ins={9}
    // package.json
    {
      // ...
      "scripts": {
        "dev": "astro dev",
        "start": "astro dev",
        "build": "astro build",
        "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
        "deno-deploy": "npm run build && deployctl deploy --project=<MY-DENO-PROJECT> --no-static --include=./dist ./dist/server/entry.mjs"
      }
    }
    ```
      </Fragment>
    </StaticSsrTabs>
    
    Dann kannst du diesen Befehl verwenden, um deine Astro-Seite in einem Schritt zu erstellen und veröffentlichen.
    
    ```bash
    DENO_DEPLOY_TOKEN=<ACCESS-TOKEN> npm run deno-deploy
    ```
</Steps>

[Deno adapter]: https://github.com/denoland/deno-astro-adapter
